<template>
  <vue-form :state="formstate" ref="form">
    <div class="weui-cells__title pl0">所属业务员：{{ salesman }}</div>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>用户名</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" v-model="model.username" type="email" required name="username" placeholder="请输入邮箱账号"/>
            </div>
        </div>
        <field-messages name="username" show="$touched">
          <div slot="required" class="err">用户名必须填写哦~</div>
          <div slot="email" class="err">用户名格式不对哦~</div>
        </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>密码</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" name="password" v-model="model.password" minlength="6" maxlength="25" required placeholder="请设置6-25个字符"/>
            </div>
        </div>
        <field-messages name="password" show="$touched">
          <div slot="required" class="err">密码格式不对哦~</div>
          <div slot="minlength" class="err">密码不能小于6位哦~</div>
          <div slot="maxlength" class="err">密码不能大于于25位哦~</div>
        </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title">展业二维码ID</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.code_id" name="code_id" type="text" placeholder="选填"/>
        </div>
      </div>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>商户类型</div>
      <div class="weui-cell">
        <input class="weui-input" @focus="handleSlectMerchantType" readonly required v-model="merchant_type_name" name="merchant_type_name" type="text" placeholder="请选择商户类型"/>
      </div>
      <field-messages name="merchant_type_name" show="$touched">
        <div slot="required" class="err">商户类型必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>商户名称</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" required v-model="model.full_name" name="full_name" type="text" placeholder="请输入与营业执照一致的商户名称"/>
        </div>
      </div>
      <field-messages name="full_name" show="$touched">
        <div slot="required" class="err">商户名称必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>商户简称</div>
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" required v-model="model.short_name" name="short_name" type="text" placeholder="请输入商户简称"/>
          </div>
      </div>
      <field-messages name="short_name" show="$touched">
        <div slot="required" class="err">商户简称必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>商户地址</div>
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" required v-model="model.real_address" name="real_address" type="text" placeholder="请输入与营业执照一致的地址"/>
          </div>
      </div>
      <field-messages name="real_address" show="$touched">
        <div slot="required" class="err">商户地址必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>客服电话</div>
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" required v-model="model.service_phone" name="service_phone" type="text" placeholder="请输入客服电话号码"/>
          </div>
      </div>
      <field-messages name="service_phone" show="$touched">
        <div slot="required" class="err">客服电话必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" v-if="model.merchant_type === 200 || model.merchant_type === 100">
      <div class="weui-cells__title"><span class="err">*</span>证件类型</div>
      <div class="weui-cell">
        <input class="weui-input" @focus="handleIdTypeSelect" required readonly v-model="bus_licence_type_name" name="bus_licence_type_name" type="text" placeholder="请选择证件类型"/>
      </div>
      <field-messages name="bus_licence_type_name" show="$touched">
        <div slot="required" class="err">证件类型必须选择~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" v-if="model.bus_licence_type === 1">
      <div class="weui-cells__title"><span class="err">*</span>证件编号</div>
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" required v-model="model.bus_licence_no" name="bus_licence_no" type="text" placeholder="请输入证件编号"/>
          </div>
      </div>
      <field-messages name="bus_licence_no" show="$touched">
        <div slot="required" class="err">证件编号必须填写~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" v-if="model.bus_licence_type === 1">
      <div class="weui-cells__title"><span class="err">*</span>证件注册时间</div>
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" @focus="handleDateSelectStart" readonly required v-model="model.bus_licence_reg_date" name="bus_licence_reg_date" type="text" placeholder="请选择"/>
          </div>
      </div>
      <field-messages name="bus_licence_reg_date" show="$touched">
        <div slot="required" class="err">
          证件注册时间必须选择~
        </div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" v-if="model.bus_licence_type === 1">
      <div class="weui-cells__title"><span class="err">*</span>证件到期时间</div>
        <div class="weui-cell" style="width: 65%;display: inline-flex;vertical-align:top;">
            <div class="weui-cell__bd">
              <input readonly  @focus="handleDateSelectEnd" class="weui-input" required v-model="model.bus_licence_expire" name="bus_licence_expire" type="text" placeholder="请选择"/>
            </div>
        </div>
        <button @touchstart.stop.prevent="model.bus_licence_expire='9999-99-99'" class="time_btn fr">永久</button>
        <field-messages name="bus_licence_expire" show="$touched">
          <div slot="required" class="err">证件到期时间必须填写~</div>
        </field-messages>
    </validate>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">店铺照片</div>
                <!-- <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div> -->
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.store_face" :src="model.store_face" alt="">
                    <input class="weui-uploader__input" name="store_face" @change="handleStoreFace" type="file" ref="uploader" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>门头照</p>
                </div>
                
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.store_counter" :src="model.store_counter" alt="">
                    <input class="weui-uploader__input" ref="store_counter" @change="handleStoreCounter" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>收银台照片</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.store_space" :src="model.store_space" alt="">
                    <input class="weui-uploader__input" ref="store_space" @change="handleStoreSpace" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>店内场景图</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.store_canyin_plat" :src="model.store_canyin_plat" alt="">
                    <input class="weui-uploader__input" ref="store_canyin_plat" readonly @change="handleCanFile" type="file" accept="image/*" multiple="" />
                  </div>
                  <p>入驻餐饮材料</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="weui-cells weui-cells_form" id="uploader">
      <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">证件照片</div>
                <!-- <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div> -->
              </div>
              <div class="weui-uploader__bd">
               <!--  <ul class="weui-uploader__files" id="uploaderFiles">
                  <li class="weui-uploader__file" v-for="item in model.bus_lease_agreement" :key="item.url" :style="{ backgroundImage: 'url('+ item.url +')' }"></li>
                </ul>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <input class="weui-uploader__input" ref="bus_lease_agreement" @change="handleLeaseFile" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>租凭合同</p>
                </div> -->
                <div class="weui-uploader_box" v-if="model.bus_licence_type === 1">
                  <div class="weui-uploader__input-box">
                    <img v-if="model.bus_licence" :src="model.bus_licence" alt="">
                    <input class="weui-uploader__input" ref="bus_licence" @change="handleStoreBus" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>营业执照</p>
                </div>
                <ul class="weui-uploader__files" id="uploaderFiles">
                  <li class="weui-uploader__file" @touchstart="handleOpenImg(item)" v-for="item in model.bus_licence_oth" :key="item.url" :style="{ backgroundImage: 'url('+ item.url +')' }"></li>
                </ul>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <input class="weui-uploader__input" ref="bus_licence_oth" @change="handleOtherFile" type="file" accept="image/*" multiple="" />
                  </div>
                  <p>其他照片</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" :class="loading ? 'weui-btn_loading': ''" @touchstart.stop.prevent="handleClickSubmit">提交审核并下一步</button>
    </div>
    <div class="weui-gallery" v-if="dialog" :style="{display: dialog ? 'block' : none }">
      <span class="weui-gallery__img" :style="{backgroundImage: 'url('+ dialog_img.url +')'}"></span>
      <div class="weui-gallery__opr">
          <a @touchend.stop.prevent="handleImgGroupDel(dialog_img)" class="weui-gallery__del">
              <i class="weui-icon-delete weui-icon_gallery-delete"></i>
          </a>
      </div>
    </div>
    <div class="weui-gallery" v-if="can" :style="{display: can ? 'block' : none }">
      <span class="weui-gallery__img" :style="{backgroundImage: 'url('+ dialog_img.url +')'}"></span>
      <div class="weui-gallery__opr">
          <a @touchend.stop.prevent="handleCanGroupDel(dialog_img)" class="weui-gallery__del">
              <i class="weui-icon-delete weui-icon_gallery-delete"></i>
          </a>
      </div>
    </div>
  </vue-form>
</template>
<script>
  import { uploader } from '@/utils/uploader'
  import { GetUrlParam } from '@/utils/index'
  import { merchantInit, ToggleType, merchant_add } from '@/api/index'

  export default {
    data() {
      return {
        salesman: '',
        formstate: {},
        option: [],
        show: false,
        dialog: false,
        can: false,
        loading: false,
        dialog_img: {},
        items: [
          { value: 300, label: '小微商户' },
          { value: 200, label: '个体户' },
          { value: 100, label: '公司' },
        ],
        bus_licence_type_name: '',
        merchant_type_name: '',
        model: {
          username: '',
          password: '',
          full_name: '',
          short_name: '',
          real_address: '',
          service_phone: '',
          merchant_type: '',
          bus_licence_no: '',
          bus_licence_type: '',
          bus_licence_expire: '',
          bus_licence_reg_date: '',
          store_canyin_plat: '',
          store_face: '',
          store_counter: '',
          store_space: '',
          bus_licence: '',
          bus_lease_agreement: [],
          bus_licence_oth: []
        }
      }
    },
    methods: {
      handleDocumentInit() {
        merchantInit(GetUrlParam('agent_num'), GetUrlParam('saleman_num')).then(res => {
          if (res.data.errorCode === 0) {
            this.salesman = res.data.result.name
          } else {
            this.$weui.alert('业务员信息获取失败，请刷新重试~')
          }
        })
      },
      handleDateSelectStart() {
        const _this = this
        this.$weui.datePicker({
          start: 1970,
          end: 2018,
          onChange(res) {
            const value = res[0].value + '-' + res[1].value + '-' + res[2].value
            _this.model.bus_licence_reg_date = value
          }
        })
      },
      handleDateSelectEnd() {
        const _this = this
        const Now = new Date()
        const end = Now.getFullYear() + 100
        this.$weui.datePicker({
          start: new Date(),
          end,
          onChange(res) {
            const value = res[0].value + '-' + res[1].value + '-' + res[2].value
            _this.model.bus_licence_expire = value
          }
        })
      },
      handleIdTypeSelect() {
        const _this = this
        if (_this.option.length > 0) {
          this.$weui.picker(_this.option, {
            onChange(res) {
              _this.model.bus_licence_type = res[0].value
              _this.bus_licence_type_name = res[0].label
              _this.model.bus_licence = ''
              _this.model.bus_lease_agreement = []
            }
          })
        } else {
          this.$weui.alert('请先选择商户类型')
        }
      },
      handleSlectMerchantType() {
        const _this = this
        this.$weui.picker(_this.items, {
          defaultValue: [300],
          onConfirm(res) {
            _this.model.merchant_type = res[0].value
            _this.merchant_type_name = res[0].label
            ToggleType(res[0].value).then(res => {
              if (res.data.errorCode === 0) {
                _this.model.bus_licence_type = ''
                _this.bus_licence_type_name = ''
                _this.option = res.data.result.licence_type
                _this.show = false
              } else {
                _this.show = false
                this.$weui.alert('证件类型获取失败')
              }
            })
          }
        })
      },
      handleClickSubmit() {
        if(this.formstate.$invalid) {
          this.$weui.alert('请补全资料')
          return false
        } else {
          if (this.model.store_face && this.model.store_counter && this.model.store_space) {
            if (this.model.bus_licence_type === 1 && this.model.bus_licence === '') {
              this.$weui.alert('请补全图片信息')
              return false
            } else {
              this.$loading(true, '正在提交')
              merchant_add(this.model, GetUrlParam('agent_num'), GetUrlParam('token'), GetUrlParam('saleman_num')).then(res => {
                if (res.data.errorCode === 0) {
                  this.$loading(false)
                  this.$toast('提交成功')
                  this.$refs.form.reset()
                  this.$store.dispatch('iconToogle', 2)
                  this.$router.push({ name: 'bank', query: { merchant_type: this.model.merchant_type, merchant_num: res.data.result.merchant_num }})
                } else {
                  this.$loading(false)
                  this.$weui.alert(res.data.errorMsg)
                }
              })
            }
          } else{
            this.$weui.alert('请补全图片信息')
          }
        }
      },
      handleStoreFace() {
        uploader(this, this.$refs.uploader.files).then(res => {
          this.model.store_face = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleStoreCounter() {
        uploader(this, this.$refs.store_counter.files).then(res => {
          this.model.store_counter = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleStoreSpace() {
        uploader(this, this.$refs.store_space.files).then(res => {
          this.model.store_space = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleStoreBus() {
        uploader(this, this.$refs.bus_licence.files).then(res => {
          this.model.bus_licence = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleLeaseFile() {
        uploader(this, this.$refs.bus_lease_agreement.files).then(res => {
          this.model.bus_lease_agreement.push({ name: Math.random()*100000000, uid: Math.random()*100000000, status: 'success', url: res })
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleOtherFile() {
        uploader(this, this.$refs.bus_licence_oth.files).then(res => {
          this.model.bus_licence_oth.push({ name: Math.random()*100000000, uid: Math.random()*100000000, status: 'success', url: res })
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleCanFile() {
        uploader(this, this.$refs.store_canyin_plat.files).then(res => {
          this.model.store_canyin_plat = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleOpenImg(item) {
        this.dialog = true
        this.dialog_img = item
      },
      handleOpenCan(item) {
        this.can = true
        this.dialog_img = item
      },
      handleImgGroupDel(item) {
        for (let i = 0; i < this.model.bus_licence_oth.length; i++) {
          if (item.uid === this.model.bus_licence_oth[i].uid) {
            this.model.bus_licence_oth.splice(i, 1)
            this.dialog = false
            this.dialog_img = {}
          }
        }
      },
      handleCanGroupDel(item) {
        for (let i = 0; i < this.model.store_canyin_plat.length; i++) {
          if (item.uid === this.model.store_canyin_plat[i].uid) {
            this.model.store_canyin_plat.splice(i, 1)
            this.can = false
            this.dialog_img = {}
          }
        }
      }
    },
    mounted() {
      this.handleDocumentInit()
    }
  }
</script>